<template>
  <div class="breadcrumb">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in list">
        <home-outlined v-if="item.path === '/'"/>
        <a @click="jumpPage(item)" v-if="active !== item.path">{{item.title}}</a>
        <span v-else>{{item.title}}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script setup>
const route = useRoute()
const router = useRouter()

const list = ref([])
const active = ref()

const jumpPage = (item) =>{
  router.push(item.path)
}

watch(() => route.matched,() =>{
  list.value = route.matched.map(item => ({title: item.meta?.title, path: item.path}))
}, {immediate: true})

watch(() => route.path, path => {
  if (path === '/home') {
    active.value = '/'
  }else {
    active.value = path
  }
}, {immediate: true})
</script>

<style scoped lang="scss">
.breadcrumb{

}
</style>